<template>
	<!-- 付费说明 -->
	<up-popup :show="show" :safe-area-inset-bottom="false" @close="close" mode="center" round="10" closeable>
		<view class="pay-popup">
			<view class="pay-popup-top mt-80">
				<view class="">
					<text class="fs-36 bold" style="color:#F69A17;">￥</text>
					<text class="fs-54 bold" style="color:#F69A17;">9.9</text>
				</view>
				<view class="pay-popup-label-1 fs-26">
					享受完整AI导览服务
				</view>
				<view class="pay-popup-label-2 gray-9">
					有效期24小时
				</view>
			</view>
			<view class="bold color fs-32 mt-40">
				付费说明
			</view>
			<view class="fs-32 mt-20 line-16">
				<text class="color mr-15">●</text>
				<text>仅需</text>
				<text class="color">0.01元</text>
				<text>，您就可以享受完整的AI导览服务;</text>
			</view>
			<view class="fs-32 mt-20 line-16">
				<text class="color mr-15">●</text>
				<text>有效期</text>
				<text class="color">24小时</text>
				<text>，从完成支付开始计时;</text>
			</view>
			<view class="fs-32 mt-20 line-16">
				<text class="color mr-15">●</text>
				<text>若有效期未到，但您已离开景区，基于位置的服务将自动停止，为确保您的个人信息安全，此时自动导览将失效，您可通过和AI聊天的方式，获取景区的功能介绍。</text>
			</view>
			<view @click="getCreatePreOrderApi" class="tap-btn-5 t-c fs-36 bold mt-50" style="white-space: nowrap;">
				确认0.01元开通付费版
			</view>
			<up-gap height="30"></up-gap>
		</view>
	</up-popup>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		watch
	} from 'vue'
	import {
		getCreatePreOrder,
		getQueryPayStatus
	} from '@/utils/request/api'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useUserStore
	} from '@/store/user'
	const appStore = useAppStore()
	const userStore = useUserStore()
	const props = defineProps({
		show:{
			default:false
		}
	})
	const emit = defineEmits(['close','success'])
	const close = ()=>{
		emit('close')
	}
	onMounted(()=>{
		
	})
	
	const getCreatePreOrderApi = async()=>{
		uni.showLoading({
			title:'加载中'
		})
		try{
			const res = await getCreatePreOrder({})
			uni.requestPayment({
				// #ifdef MP-WEIXIN
				...res,
				// #endif
				success() {
					getQueryPayStatusApi(res.outTradeNo)
				},
				fail(res) {
					console.log(res,'errrrrrrrrrrrr');
					uni.showModal({
						title:'支付失败',
						content:'支付失败，请重新尝试完成支付',
						showCancel:false,
						success: () => {
							
						}
					})
				},
				complete(){
					uni.hideLoading()
				}
			})
		}catch(e){
			//TODO handle the exception
			uni.hideLoading()
		}
		
	}
	
	const getQueryPayStatusApi = async(outTradeNo)=>{
		const res = await getQueryPayStatus({
			outTradeNo:outTradeNo
		})
		emit('success')
		uni.showModal({
			title:res.msg,
			content:'您的智慧之旅已开启，随石竹郎共游石竹山，品悟祈梦胜境!',
			showCancel:false,
			success: () => {
			}
		})
	}
</script>

<style lang="scss">
	.pay-popup {
		width: 80vw;
		// box-sizing: border-box;
		padding: 0 40rpx;
	
		.pay-popup-top {
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			position: relative;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			background-color: #e8faf8;
	
			.pay-popup-label-1 {
				position: absolute;
				top: 0;
				right: 0;
				border-radius: 0 0 0 20rpx;
				color: #fff;
				background-color: var(--color);
				padding: 8rpx 20rpx;
			}
	
			.pay-popup-label-2 {
				position: absolute;
				bottom: 10rpx;
				right: 20rpx;
			}
		}
	}
	
</style>